<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <style>
        .grid-demo {
            height: 100px;
            background-color: aquamarine;


        }

        .grid-demo-bg1 {
            background-color: bisque;
        }
    </style>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"
        style="font-size: 30px; color: #1E9FFF;"></i>
    <i class="layui-icon layui-icon-clear" style="font-size: 30px; color: #1E9FFF;"></i>
    <div style="width: 380px;">
        <button type="button" class="layui-btn layui-btn-fluid">流体按钮（宽度自适应）</button>
    </div>
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
        <button class="layui-btn layui-btn-primary layui-border-blue">蓝色按钮</button>
        <button class="layui-btn layui-btn-primary layui-border-orange">橙色按钮</button>
        <button class="layui-btn layui-btn-primary layui-border-red">红色按钮</button>
        <button class="layui-btn layui-btn-primary layui-border-purple">紫色按钮</button>
        <button class="layui-btn layui-btn-primary layui-border">普通按钮</button>
    </div>
    <div class="layui-btn-container">
        <button type="button" class="layui-btn">默认按钮</button>
        <button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button>
        <button type="button" class="layui-btn layui-bg-orange">橙色按钮</button>
        <button type="button" class="layui-btn layui-bg-red">红色按钮</button>
        <button type="button" class="layui-btn layui-bg-purple">紫色按钮</button>
        <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space10">
            <!-- 手机上 占6格 -->
            <!-- 平板上 占3格 -->
            <!-- 平板以后上 占3格 -->
            <div class="layui-col-xs4">
                <div class="grid-demo grid-demo-bg1">6/12</div>
            </div>

            <!-- 所有设置 下面的div 都占4格 -->

            <!-- layui-col-md-offset4 - 相对自身的原本的位置 偏移 -->
            <div class="layui-col-xs4 layui-col-md-offset4">
                <div class="grid-demo">6/12</div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">3/12</div>
            </div>
            <div class="layui-col-xs3">
                <div class="grid-demo">3/12</div>
            </div>
            <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">3/12</div>
            </div>
            <div class="layui-col-xs3">
                <div class="grid-demo">3/12</div>
            </div>

            <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">3/12</div>
            </div>
            <div class="layui-col-xs3">
                <div class="grid-demo">3/12</div>
            </div>
            <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">3/12</div>
            </div>
            <div class="layui-col-xs3">
                <div class="grid-demo">3/12</div>
            </div>
        </div>



        <div class="layui-row">
            <!-- layui-col-md-offset3 -->
            <!-- 只适配了 md 中等设置以上的 设备 -->
            <!-- 没有适配平板和手机 ， 这些失败上独占一行12 -->
            <div class="layui-col-md3 ">
                <div class="grid-demo grid-demo-bg1">偏移3列</div>
            </div>
            <div class="layui-col-md3">
                <div class="grid-demo">不偏移</div>
            </div>
        </div>

        <div class="layui-row layui-hide-xs">
            <div class="layui-col-xs6 ">
                <div class="grid-demo grid-demo-bg1">
                    <div class="layui-row">
                        <div class="layui-col-xs6 grid-demo">

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>